/* ===  css des composants du site         === */

/* === Grille claude D:\Mes fichiers\Websites_2027\WCCSS_Tassin\grille-w3css.html  === */




/* *****************  titres sous titres    Balises h1 h2 h3 h4 en 2 lignes centrées etc     **********************************************/

/* === titres.css === */
/* Base pour les titres (la couleur sera gérée par w3-text-theme dans le HTML) */

h1,
h2,
h3,
h4 {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.3;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

h1 {
    font-size: 2.5em;
    font-weight: bold;
}

h2 {
    font-size: 2em;
    font-weight: bold;
}

h3 {
    font-size: 1.5em;
    font-weight: bold;
}

h4 {
    font-size: 1.2em;
    font-weight: bold;
}

/* 1. Deux parties sur la même ligne (aligné à gauche par défaut) */
/* La 1ère partie est normale, la 2ème partie est réduite de 20% (0.8em) et plus claire */
.titre-partie-2 {
    font-size: 0.8em;
    font-weight: lighter;
}

/* 2. Titre sur 2 lignes */
/* Force le passage à la ligne. En haut normal, en dessous réduit de 20% */
.titre-ligne-2 {
    display: block;
    font-size: 0.8em;
    font-weight: normal;
    margin-top: 5px;
}

/* 3. Titre sur 2 lignes centré au milieu de la page */
/* On ajoute juste le centrage du texte, la 2ème ligne hérite du bloc au-dessus avec un gras plus léger */
.titre-centre {
    text-align: center;
}

.titre-centre .titre-ligne-2 {
    font-weight: lighter;
    /* Spécifique au centré : font weight plus clair */
}


/* *****************          **********************************************/

/* *****************  /  
              
                
                  **********************************************/


/* *****************      LiensUtiles       **********************************************/
/* === LiensUtiles.css === */

/* Conteneur principal */
.liens-utiles {
    line-height: 1.5;
    /* modifier line-height: 2.2; Espace moyen/minimal entre les lignes si retour à la ligne */
    padding: 15px 5px;
    box-sizing: border-box;
}

/* Option 1 : Centré */
.liens-utiles-center {
    text-align: center;
}

/* Option 2 : Normal à gauche */
.liens-utiles-left {
    text-align: left;
}

/* Les hyperliens */
.liens-utiles a {
    display: inline-block;
    /* Permet de gérer proprement les marges */
    text-decoration: none;
    /* Pas de soulignement par défaut */
    margin: 0 4px;
    /* Petit espace avant/après le lien */
    transition: color 0.2s ease, text-decoration 0.2s ease;
    font-weight: 500;
}

/* Animation au survol (soulignement) */
.liens-utiles a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
    /* Légère distance du trait de soulignement */
}

/* Icône loupe avant le lien */
.liens-utiles a i {
    margin-right: 5px;
    /* Espace entre la loupe et le texte */
    font-size: 0.9em;
    /* Légèrement plus petit que le texte */
    opacity: 0.8;
}

/* Séparateur Pipe (|) */
.liens-utiles .pipe {
    color: #888;
    /* Couleur neutre pour le séparateur */
    margin: 0 6px;
    /* Espace de chaque côté du pipe */
    user-select: none;
    /* Non sélectionnable pour le copier-coller */
}



/* *****************     Photos images       **********************************************/

/* === Images.css === */

/* Conteneur de l'image (hyperlien) */
.img-card {
    display: block;
    position: relative;
    overflow: hidden;
    /* Masque les bords de l'image pour le zoom et les bords arrondis */
    border-radius: 8px;
    /* Bords arrondis */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    /* Shadow minimal tout le tour */
    margin: 10px;
    /* Marge réduite autour de l'image */
    background-color: #fff;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    text-decoration: none;
}

/* Au survol du conteneur, on augmente légèrement l'ombre pour le relief */
.img-card:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
    transform: translateY(-3px);
    /* Léger soulèvement */
}

/* L'image elle-même */
.img-card img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
    /* Animation de zoom fluide */
}

/* Léger zoom au passage de la souris */
.img-card:hover img {
    transform: scale(1.08);
    /* Zoom de 8% */
}

/* Légende de l'image (cachée par défaut) */
.img-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    /* Dégradé pour la lisibilité */
    color: #fff;
    padding: 25px 15px 10px 15px;
    /* Plus de padding en haut pour le dégradé */
    font-size: 1em;
    font-weight: 500;
    opacity: 0;
    /* Invisible par défaut */
    transform: translateY(100%);
    /* Cachée en bas */
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    /* La légende ne gêne pas le clic sur le lien */
}

/* Apparition de la légende au survol */
.img-card:hover .img-caption {
    opacity: 1;
    transform: translateY(0);
    /* Remonte à sa position */
}



/* *****************     Accordions  list dl ol ul    **********************************************/
/* === accordion.css === */

/* Groupe d'accordéons */
.accordion-group {
    max-width: 99%;
    /*  max-width: 800px; */
    margin: 0 auto;
}

/* Séparation verticale et ombre entre chaque accordéon */
.accordion-item {
    margin-bottom: 5px;
    /* margin-bottom: 15px;  Espace vertical (séparation) sous le bloc  accordéon */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /*    Ombre */
    /* Ombre */
    border-radius: 4px;
    overflow: hidden;
    /* Pour garder les angles arrondis */
    background-color: #fff;
}

/* En-tête de l'accordéon (cliquable) */
.accordion-header {   
    margin-bottom: 5px;   /*  espace vertical entre 2 accodéons item */
    cursor: pointer;
    padding: 10px 20px;
    /*  padding: 16px 20px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: filter 0.3s ease;
    /* Animation de couleur au survol/ouverture */
}

/* Assombrir légèrement l'en-tête quand actif (marche avec toutes les couleurs de thème) */
.accordion-item.active .accordion-header {
    filter: brightness(0.9);
}

.accordion-header h3 {
    margin: 0;
    font-size: 1.2em;
    font-weight: bold;
}

/* Icône de la flèche (animée) */
.accordion-icon {
    transition: transform 0.3s ease;
}

.accordion-item.active .accordion-icon {
    transform: rotate(90deg);
    /* La flèche tourne quand l'accordéon s'ouvre */
}

/* Contenu de l'accordéon (caché par défaut, animé) */
.accordion-content {
    max-height: 0;
    /* Fermé au chargement */
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
    padding: 0 20px;
    /* Padding horizontal seulement au début */
    background-color: #fff;
}

/* Quand l'accordéon est ouvert */
.accordion-item.active .accordion-content {
    max-height: 2500px;
    /*  max-height: 1000px; Hauteur max suffisante pour le contenu */
    padding: 20px;
    /* Padding complet */
}








/* === Styles pour les listes (dl, dt, dd, ul, ol, blockquote) === */

/* Listes de définition */
dl {
    margin: 0;
    margin-left: 5px;    /* decal la liste à droite marge */
}

/* Terme de définition (dt) */
dt {
    font-weight: bold;
    font-size: 1.1em;
    margin-top: 5px;
    /* suprim   margin-bottom: 5px; */

}

dt:first-child {
    margin-top: 0;
    /* Pas de marge en haut pour le premier dt */
}

/* Description (dd) - Décalé à droite avec bordure fine à gauche */
dd {
    font-size: 1.0em;
    line-height: 1.3;
    margin-left: 20px;    /* Décalage à droite */
    padding: 10px 8px;    /* padding: 10px 15px;  Espacement interne */
    border-left: 3px solid #ccc;    /* Bordure fine à gauche */ 
    margin-bottom: 8px;
    /* suprim  margin-bottom: 15px;*/
    background-color: #f9f9f9;
}

/* Listes ul et ol à l'intérieur de dd */
dd ul,
dd ol {
    margin-left: 15px;
    /* Légère marge à gauche pour l'aspect visuel */
    padding-left: 20px;
    
    /*   margin-top: 10px;*/  
    margin-bottom: 5px;
}

dd li {
    margin-bottom: 5px;
}



/* **************      Citation (blockquote) ******************* */
blockquote {
    margin: 15px 0;
    padding: 15px 20px;
    background-color: #f4f4f4;
    border-left: 5px solid #ccc;
    /* Sera colorisé par w3-border-theme dans le HTML */
    font-style: italic;
    color: #555;
}

blockquote footer {
    font-size: 0.9em;
    text-align: right;
    margin-top: 10px;
    font-style: normal;
    font-weight: bold;
}


/* *****************  / fin   Accordions  list dl ol ul    **********************************************/



/* --- CSS DU DIAPORAMA horizontal ************************ --- */
:root {
    --slide-height: 250px;
    /* Hauteur des images sur ordinateur */
    --slide-gap: 16px;
    /* Espace entre les images */
}

.w3-slide-container {
    overflow: hidden;
    /* Cache les images qui sortent du cadre */
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.w3-slide-track {
    display: flex;
    width: max-content;
    /* Permet à la piste de s'étendre au-delà de 100% */
    animation: w3-scroll-rtl 40s linear infinite;
    /* Animation par défaut */
}

.w3-slide-img {
    height: var(--slide-height);
    width: auto;
    /* Conserve les proportions */
    object-fit: cover;
    display: block;
    margin-right: var(--slide-gap);
    /* Espace entre les images (remplace gap) */
    flex-shrink: 0;
    /* Empêche l'image d'être écrasée par flexbox */
}

/* Arrêt au survol */
.w3-slide-container:hover .w3-slide-track {
    animation-play-state: paused;
}

/* Responsivité pour les téléphones */
@media only screen and (max-width: 600px) {
    :root {
        --slide-height: 150px;
        --slide-gap: 8px;
    }
}

/* Animations de défilement */
@keyframes w3-scroll-rtl {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

    /* -50% car on duplique le contenu */
}

@keyframes w3-scroll-ltr {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

/* --- / fin  CSS DU DIAPORAMA horizontal ************************ --- */